<template>
  <div class="recommend">
    <div class="title">人气推荐</div>
    <ul class="hot-recommend">
      <li v-for="item in hotGoodsList" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <div>
          <h4>{{ item.name }}</h4>
          <div class="hot-recommend-title">{{ item.goods_brief }}</div>
          <div class="price">{{ item.retail_price | moneyFilters }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "",
  props: ["hotGoodsList"],
  components: {},
};
</script>
 
<style lang="less" scoped>
.recommend {
  margin-top: 0.2rem;
  background: #fff;
  .title {
    line-height: 0.5rem;
    height: 0.5rem;
    text-align: center;
  }
}
.hot-recommend {
  // padding: 8px 0.16rem;
  li {
    display: flex;
    width: 100%;
    background: #fafafa;
    margin-bottom: 0.1rem;
    img {
      width: 25%;
      display: block;
      margin-right: 0.2rem;
    }
    h4 {
      font-weight: normal;
      font-size: 0.16rem;
      color: #323232;
      padding-top: 0.1rem;
    }
    .hot-recommend-title {
      color: #646566;
      font-size: 0.12rem;
      padding-top: 0.15rem;
    }
    .price {
      color: red;
      font-size: 0.16rem;
      padding-top: 0.15rem;
    }
  }
}
</style>